<template>
  <ul class="dataFilter">
    <li v-for="(item, index) in filterColumn" :key="index">
      <t-row class="margin-bottom">
        <t-col :span="1"> ( </t-col>
      </t-row>
      <t-row
        :gutter="16"
        class="margin-top-sm margin-bottom-sm"
        v-for="(citem, cindex) in item"
        :key="cindex"
      >
        <t-col :span="1" class="tc">
          <span> {{ index + 1 }}-{{ Number(cindex) + 1 }}</span>
        </t-col>
        <t-col :span="2">
          <t-select v-model="citem.field_id">
            <t-option
              :label="item.field_cn"
              :value="item.id"
              v-for="item in fieldOptions"
              :key="item.id"
            />
          </t-select>
        </t-col>
        <t-col :span="2">
          <t-select v-model="citem.compare_op">
            <t-option
              :label="item.value"
              :value="item.colKey"
              v-for="item in conditionOptions"
              :key="item.value"
            />
          </t-select>
        </t-col>
        <t-col :span="2">
          <t-input v-model="citem.value" v-if="valueOptions === undefined" />
          <t-select v-model="citem.value" :options="valueOptions" v-else>
          </t-select>
        </t-col>
        <t-col :span="2">
          <t-select
            v-model="citem.logic_op"
            v-show="
              Number(cindex) + 1 != item.length ||
              Number(index) + 1 != filterColumn.length
            "
          >
            <t-option
              :label="item.value"
              :value="item.colKey"
              v-for="item in andOrOptions"
              :key="item.value"
            />
          </t-select>
        </t-col>
        <t-col :span="3">
          <t-button
            theme="default"
            shape="square"
            v-show="cindex === item.length - 1"
            @click="addFilterItem(item, 1)"
          >
            <AddIcon class="color-primary" />
          </t-button>
          <t-button
            theme="default"
            shape="square"
            v-show="item.length > 1"
            @click="removeFilterItem(item, Number(cindex))"
          >
            <RemoveIcon class="color-warning" />
          </t-button>
        </t-col>
      </t-row>

      <t-row justify="space-between" class="margin-top">
        <t-col :span="1"> ) </t-col>
        <t-col :span="3">
          <!-- <t-button theme="default" shape="square" v-show="index === filterColumn.length - 1"
                            @click="addFilterItem(filterColumn)">
                            :style="'opacity:'+(rowIndex == tableData.length-1?1:0)"
                            <AddIcon  class="color-primary" />
                        </t-button> -->
          <t-button
            theme="default"
            shape="square"
            v-show="filterColumn.length > 1"
            @click="removeFilterItem(filterColumn, index)"
          >
            <RemoveIcon class="color-warning" />
          </t-button>
          <t-button
            theme="default"
            shape="square"
            v-show="index === filterColumn.length - 1"
            @click="addFilterItem(filterColumn, 0)"
          >
            <img src="@/assets/images/icon/conditionGroup.png" alt="" />
          </t-button>
        </t-col>
      </t-row>
    </li>
  </ul>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { AddIcon, RemoveIcon } from 'tdesign-icons-vue-next';

interface Props {
  dataFilterOption: any;
  dataFilterData: { [key: string]: any }[];
}
const props = withDefaults(defineProps<Props>(), {
  dataFilterOption: () => {},
  dataFilterData: () => [],
});

const fieldOptions = ref(props.dataFilterOption.field);
const conditionOptions = ref(props.dataFilterOption.condition);
const andOrOptions = ref(props.dataFilterOption.andOr);
const valueOptions = ref(props.dataFilterOption.value);

const filterColumn = ref(props.dataFilterData);
const addFilterItem = (target: any, flag: number) => {
  if (flag) {
    target.push({
      field_id: '',
      compare_op: '',
      value: '',
      logic_op: '',
    });
  } else {
    target.push([
      {
        field_id: '',
        compare_op: '',
        value: '',
        logic_op: '',
      },
    ]);
  }
};
const removeFilterItem = (target: any, i: number) => {
  target.splice(i, 1);
  console.log(target.length, i - 1);
  if (target.length - 1 === i - 1) {
    target[i - 1].logic_op = '';
  }
};
watch(
  () => props.dataFilterData,
  newVal => {
    filterColumn.value = newVal;
  },
);
watch(
  () => props.dataFilterOption.field,
  newVal => {
    fieldOptions.value = newVal;
  },
);
watch(
  () => props.dataFilterOption.value,
  newVal => {
    valueOptions.value = newVal;
  },
);
</script>
<style lang="scss" scoped>
.dataFilter {
  > li {
    padding: 12px 0;
    border-bottom: 1px solid #e7e7e7;
    width: 100%;
  }
}
</style>
